<template>
  <div class="app-container calendar-list-container">
    <!-- 正文 -->
    <section class="main-body">
      <el-row class="item">
        <span class="title">{{data.proposal_title}}</span>
      </el-row>
      <el-row class="item">
        <span class="author">{{data.create_username}}</span>
        &nbsp;&nbsp;
        <span class="author">{{data.create_time}}</span>
      </el-row>
      <div>
        <el-row>
          <p class="item_name">现状描述</p>
        </el-row>
        <el-row class="item">
          <div class="content content-img" v-html="data.actuality_description"></div>
        </el-row>
        <el-row>
          <p class="item_name">改进方案</p>
        </el-row>
        <el-row class="item">
          <div class="content content-img" v-html="data.improvement_scheme"></div>
        </el-row>
        <el-row>
          <p class="item_name">效益预测</p>
        </el-row>
        <el-row class="item">
          <div class="content" v-html="data.benefit_calculation"></div>
        </el-row>
      </div>

    </section>
    <!-- 评论区 -->
    <section class="comment-body" v-loading="loading">
      <el-row class="item">
        <span class="title">全部评论</span>
        <el-button type="text" style="float: right;margin-left: 10px" @click="sortTime">时间</el-button>
        <el-button type="text" style="float: right" @click="sortLike">热度</el-button>
      </el-row>
      <el-row class="item">
        <ul>
          <li v-for="(item,i) in comments" :key="item.id">
            <el-row>
              <el-col :span="2">
                <img v-if="item.portrait" :src="item.portrait" class="avatar">
                <i v-else class="iconfont ali-avatar"></i>
              </el-col>
              <el-col :span="21" :offset="1">
                <div>
                  <span>{{item.user_name}}</span>
                  <el-button @click="delComment(item)" icon="iconfont ali-bin" type="text" size="mini" style="float: right;padding-top:5px;margin-left: 10px;"></el-button>
                  <i class="iconfont ali-message icon" style="float: right;margin-left: 10px;">
                    ({{item.child_sum || 0}})
                  </i>
                  <i class="iconfont ali-dianzan_active icon" style="float: right;margin-left: 10px;">
                    ({{item.like_nums || 0}})
                  </i>
                </div>
                <div class="time">
                  <span>{{i + 1}}楼</span>
                  <span>{{item.create_time | clacTime}}</span>
                </div>
                <span class="comment">{{item.comment_content}}</span>
                <div class="hr"></div>
              </el-col>
            </el-row>
          </li>
        </ul>
      </el-row>
    </section>
  </div>
</template>
<script>
import { advice_findById, advice_del} from '@/api/advice'
import { articleComment_listAll, articleComment_delete, articleComment_getTree } from '@/api/articleComment'
import { clacTime } from '@/utils'
export default {
    name: 'communityDetail',
    data() {
        return {
            loading: false,
            data: {},
            comments: [],
            query: { order_by: 'create_time', sort: 'desc' }
        }
    },
    filters: {
        clacTime: function(value) {
            return clacTime(value)
        }
    },
    methods: {
        async delComment(e) {
            try {
                let res = await this.$confirm('确认删除吗？');
                if (res == 'confirm') {
                    const { data } = await advice_del({ id: e.id })
                    if (data.status == 100) {
                        this.$message.success('删除成功')
                          this.initList();
                        this.initComment();
                    }
                }
            } catch (error) {
                console.log(error, 'error')
            }
        },
        sortTime() {//时间排序
            this.query.sort = this.query.sort == 'desc' ? 'asc' : 'desc'
            // this.initComment();
        },
        sortLike() {//热度排序
            this.query.order_by = this.query.order_by == 'create_time' ? 'like_nums' : 'create_time'
            // this.initComment();
        },
        async initList() {
          // 获取数据
            const { data } = await advice_findById({ id: this.$route.query.id });
            if (data.status == 100) {
                this.data = data.data;
                this.comments = data.data.proposalComments
            }
            // this.initComment();
        },
        async initComment() {
            const args = {
                proposal_id: this.$route.query.id,
                company_id: localStorage.getItem("companyId"),
            }
            const params = {...args, ...this.query}
            this.loading = true;
            const { data } = await proposalComment_getTree(params);
            this.loading = false;
            if (data.status == 100) {
                this.comments = data.data
            }
        }
    },
    created() {
        this.initList();
    }
}
</script>
<style>
.content-img img{
    max-width: 100%;
}
</style>
<style lang="scss" scoped>
.main-body {
  width: 60%;
  margin-left: 20%;
  background-color: #fff;
  box-shadow: 2px 2px 2px #ebeef5;
  margin-bottom: 20px;
  .item {
    padding: 20px;
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #606266;
  }
  .author {
    font-size: 13px;
    color: #909399;
  }
  .content {
    font-size: 13px;
    color: #606266;
    padding: 10px;
    border: 1px solid #EBEEF5;
    border-radius: 5px;
  }
}

.comment-body {
  width: 60%;
  margin-left: 20%;
  background-color: #fff;
  box-shadow: 2px 2px 2px #ebeef5;
  margin-bottom: 20px;
  .item {
    padding: 20px;
  }
  .title {
    color: #c0c4cc;
    font-size: 15px;
    line-height: 30px;
  }
  .comment {
    color: #606266;
    font-size: 15px;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .ali-avatar {
    font-size: 40px;
    color: #c6c5c5;
  }
  .time {
    font-size: 12px;
    color: #909399;
    margin: 5px 0;
  }
  .hr {
    border-bottom: 1px solid #dcdfe6;
    margin: 10px 0 5px 0;
  }
  .icon {
    font-size: 18px;
    color: #909399;
  }
}
.item_name {
  font-size: 15px;
  margin-left: 3%;
  font-weight: 700;
  color: #606266;
}
</style>
